// import React, { Component } from 'react';
import React from 'react';
import PropTypes from 'prop-types'
import { Carousel } from 'antd-mobile'
import { SwiperWrap } from './StyledCookBook'

// import img1 from '@a/images/swiper-1.jpeg'
// import img2 from '@a/images/swiper-2.jpeg'
// import img3 from '@a/images/swiper-3.jpeg'

// export default class Swiper extends Component {
//   state = {
//     data: ['1', '2', '3'],
//     // imgHeight: 176,
//     imgHeight: 'auto',
//   }

//   componentDidMount() {
//     // simulate img loading 模拟
//     setTimeout(() => {
//       this.setState({
//         data: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI'],
//       });
//     }, 100);
//   }

//   render() {
//     return (
//       <div>
//         <SwiperWrap>
//           <Carousel className="custom-carousel"
//             autoplay={false}
//             dotStyle={{
//               backgroundColor: "hsla( 22, 80%, 93%, 1)"
//             }}
//             dotActiveStyle={{
//               backgroundColor: "#ee742f"
//             }}
//             infinite
//             beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
//             afterChange={index => console.log('slide to', index)}
//           >
//             <a
//               href="http://baidu.com"
//               style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
//             >
//               <h2 style={{ position: 'absolute', bottom: '5.4%', left: '3%', fontSize: '.18rem' }}>今日推荐：油饼</h2>
//               <img
//                 src={img1}
//                 alt=""
//                 style={{ width: '100%', verticalAlign: 'top' }}
//                 onLoad={() => {
//                   // fire window resize event to change height
//                   window.dispatchEvent(new Event('resize'));
//                   this.setState({ imgHeight: 'auto' });
//                 }}
//               />
//             </a>
//             <a
//               href="http://baidu.com"
//               style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
//             >
//               <h2 style={{ position: 'absolute', bottom: '5.4%', left: '3%', fontSize: '.18rem' }}>今日推荐：梅菜扣肉</h2>
//               <img
//                 src={img2}
//                 alt=""
//                 style={{ width: '100%', verticalAlign: 'top' }}
//                 onLoad={() => {
//                   window.dispatchEvent(new Event('resize'));
//                   this.setState({ imgHeight: 'auto' });
//                 }}
//               />
//             </a>
//             <a
//               href="http://baidu.com"
//               style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
//             >
//               <h2 style={{ position: 'absolute', bottom: '5.4%', left: '3%', fontSize: '.18rem' }}>今日推荐：西蓝花</h2>
//               <img
//                 src={img3}
//                 alt=""
//                 style={{ width: '100%', verticalAlign: 'top' }}
//                 onLoad={() => {
//                   window.dispatchEvent(new Event('resize'));
//                   this.setState({ imgHeight: 'auto' });
//                 }}
//               />
//             </a>
//           </Carousel>
//         </SwiperWrap>
//       </div>
//     )
//   }
// }

const Swiper = (props) => {
  // console.log(props.list.size)
  const list = props.list.toJS() // 点是需要原生js的，img没有使用swiper组件不需要
  return (
  <div>
    <SwiperWrap>
      {/* { props.list.length > 0 && <Carousel className="custom-carousel" */}
      { list.length > 0 && <Carousel className="custom-carousel"
        autoplay={true}
        dotStyle={{
          backgroundColor: "hsla( 22, 80%, 93%, 1)"
        }}
        dotActiveStyle={{
          backgroundColor: "#ee742f"
        }}
        infinite
      >
        {
           list.map(value => {
            return (
              <div
                // href="http://baidu.com"
                style={{ display: 'inline-block', width: '100%', height: 'auto' }}
                key={value.id}
                onClick={props.onGoToDetail(value.name)}
              >
                <h2 style={{ position: 'absolute', bottom: '5.4%', left: '3%', fontSize: '.18rem' }}>今日推荐：{value.name}</h2>
                <img
                  src={value.img}
                  alt=""
                  style={{ width: '100%', verticalAlign: 'top' }}
                />
              </div>
            )
          })
        }
      </Carousel>
      }
    </SwiperWrap>
  </div>
  )
}
// Swiper.propTypes = {
//   list: PropTypes.array
// }
export default Swiper